<template>
 <div id="detail">
    <p>详情页面 {{ id }}</p>
     <!-- 导航栏 -->
    <detail-nav @cut="cut"></detail-nav>
        <!-- 图片展示 -->
        <detail-img :detailData="getDetailData" />
        <!-- 内容展示 -->
        <detail-content :detailContent="getDetailData" />
        <!-- 运用对象来展示 ，数据复杂的时候，就才用这个方法 没钱买接口哎-->
        <desc-new-content  :descNewContent="desc" />
        <div style="overflow:scroll;">
         <ul>
         <li :key="item" v-for="item in $store.state.cartShopping">
             {{ item }}
         </li>
        </ul>
        </div>  
        
        
        <bottom-nav :cartInformation="desc"></bottom-nav>
    </div>
</template>

<script>
import DetailNav from './childrenDetailComps/DetailNav'
import DetailImg from './childrenDetailComps/DetailImg'
import DetailContent from './childrenDetailComps/DetailContetn'
import DescNewContent from './childrenDetailComps/DescNewContent'
import BottomNav from './childrenDetailComps/BottomNav'

/* import Scroll from '@/components/common/better_scroll/Scroll' */


import {getDetail,getDesc,
        Desc} from '@/network/detail'
 
export default({
    name:'Detail',
    data(){
        return {
            id:null,
            getDetailData:[], /* 通过id拿到数据，然后保存数据 */
            desc:{},        /* 将数据简化，其实也没多少，主要学习一下思想 */
        }
    },
    created(){
        //1.保存传入的id
        this.id=this.$route.params.id

        //2.根据id请求数据
        this.getDetail(this.id)
        this.getDesc(this.id)
        

        
    },
    methods:{
        cut(index){
            console.log(index);
        },


        /* 请求网络请求的函数 */
        getDetail(id){
            getDetail(id).then(res => {
            console.log(res.data.data.artist)
            this.getDetailData = res.data.data.artist
        })
        },
        getDesc(id){
            getDesc(id).then(res => {
                 
               console.log(res)
               const data = res.data
               this.desc = new Desc(data.introduction,data.topicData,data.briefDesc) //名称写错了我去，放入上面的this 为{} 放不上去，  
                    
            })
        },
       
        

    },
    components:{
      DetailNav,
      DetailImg,
      DetailContent,
      DescNewContent,
      BottomNav

    }
})

</script>

<style>
    #detail{
        /* 将导航栏覆盖了 搞障眼法*/
        position: relative;
        z-index: 9;
        background-color: #fff;
    }
</style>
